<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易购物车</title>
</head>
<body>
  <div id="app">
    <table>
      <tr>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>小计</th>
        <th>操作</th>
      </tr>
      <tr v-for="item of cartData" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button :disabled="item.num <= 1" @click="item.num--">-</button>
          {{ item.num }}
          <button @click="item.num++">+</button>
        </td>
        <td>
          {{ item.price * item.num }}
        </td>
        <td @click="deleteItem(item.id)">
          删除
        </td>
      </tr>
    </table>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    data: {
      cartData: [ { 
        id: 1, 
        name: '小米', 
        price: 100, 
        num: 1
      }, { 
        id: 2, 
        name: '华为', 
        price: 200, 
        num: 1 
      },{ 
        id: 3, 
        name: '联想',
        price: 300, 
        num: 1 
      } ]
    },
    methods: {
      deleteItem (id) {
        //   找出符合数据对象的下标
        const index = this.cartData.findIndex(item => item.id === id)
        this.cartData.splice(index, 1)
      }
    }
  }).$mount('#app')
</script>
</html>